<template>
	<view>
		<view class="section-wrapper" v-if="content.content">
			<view class="section-title">课文内容</view>
			<view class="section-content">
				<u-parse :content="content.content" @preview="preview"></u-parse>
			</view>
		</view>
		<view class="section-wrapper" v-if="content.audio_asset_url">
			<view class="section-title">课文录音</view>
			<audio v-if="content.audio_asset_url" :src="content.audio_asset_url" author="知识库" name="课文录音" controls loop></audio>
		</view>
		<view class="section-wrapper" v-if="content.eng_chn">
			<view class="section-title">英汉对照</view>
			<view class="section-content">
				<u-parse :content="content.eng_chn" @preview="preview"></u-parse>
			</view>
		</view>
		<view class="section-wrapper" v-if="content.teaching_reference">
			<view class="section-title">教学参考</view>
			<view class="section-content">
				<u-parse :content="content.teaching_reference" @preview="preview"></u-parse>
			</view>
		</view>
		<view class="section-wrapper section-wrapper-listen" v-if="listen.length > 0">
			<view class="section-title">听力</view>
			<view class="section-content">
				<view v-for="(item, index) in listen" class="listen-item" :key="item.id">
					<u-parse v-if="item.content" :content="item.content" @preview="preview"></u-parse>
					<audio v-if="item.audio_asset_url" :src="item.audio_asset_url" author="知识库" name="听力练习" controls loop></audio>
					<u-parse v-if="item.analysis" :content="item.analysis" @preview="preview"></u-parse>
				</view>
			</view>
		</view>
		<view class="section-wrapper section-wrapper-knowledgePoint" v-if="knowledgePoint.length > 0">
			<view class="section-title">知识点</view>
			<view class="knowledge-point-list">
				<navigator v-for="(item, index) in knowledgePoint" class="kp-item" :url="`/pagesA/knowleadgePoint/detail?uuid={{item.uuid}}`" :key="item.id">
					{{ index + 1}}、{{ item.content }}<image src="../../static/image/arrow.png" class="kp-item__icon">
				</navigator>
			</view>
		</view>
		<view class="section-wrapper section-wrapper-newWord" v-if="newWord.length > 0 || content.listen_asset_url">
			<view class="section-title">词汇</view>
			<view class="knowledge-point-list">
				<navigator v-for="(item, index) in newWord" class="kp-item" :url="`/pagesA/newWord/detail?uuid={{item.uuid}}`" :key="item.id">
					{{ index + 1}}、{{ item.content }}<image src="../../static/image/arrow.png" class="kp-item__icon">
				</navigator>
			</view>
			<audio v-if="content.new_word_asset_url":src="content.new_word_asset_url" author="知识库" name="词汇录音" controls loop></audio>
		</view>
		<view class="section-wrapper section-wrapper-grammar" v-if="grammar.length > 0">
			<view class="section-title">语法</view>
			<view class="knowledge-point-list">
				<navigator v-for="(item, index) in grammar" class="kp-item" :url="`/pagesA/grammar/detail?uuid={{item.uuid}}`" :key="item.id">
					{{ index + 1}}、{{ item.content }}<image src="../../static/image/arrow.png" class="kp-item__icon">
				</navigator>
			</view>
		</view>
		<view class="section-wrapper" v-if="paper.uuid">
			<view class="section-title">单元练习</view>
			<view class="knowledge-point-list">
				<navigator class="kp-item" :url="`/pagesA/paper/detail?uuid={{paper.uuid}}&name={{paper.name}}`">
					{{ paper.name }}<image src="../../static/image/arrow.png" class="kp-item__icon">
				</navigator>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="op-wrapper">
			<button class="op-item" v-if="knowledgePoint.length > 0" @click="handleOpItemClick('.section-wrapper-knowledgePoint')">知识点</button>
			<button class="op-item"v-if="paper.uuid" @click="handleUnitTestClick">单元练习</button>
			<button class="op-item" v-if="newWord.length > 0" @click="handleOpItemClick('.section-wrapper-newWord')">词汇</button>
			<button class="op-item" v-if="grammar.length > 0" @click="handleOpItemClick('.section-wrapper-grammar')">语法</button>
		</view>
	</view>
</template>

<script>
	import { detail } from "@/api/teaching.js";
	import { add as addRecord } from "@/api/record.js";
	import uParse from '@/components/u-parse/u-parse.vue'
		
	export default {
		components: {
		    uParse
		},
		data() {
			return {
				content: {
					name: '',
					content: '',
					audio_asset_url: '',
					new_word_asset_url: '',
					teaching_reference: '',
					eng_chn: '',
				},
				knowledgePoint: [],
				newWord: [],
				grammar: [],
				paper: {
					uuid: '',
					name: '',
				},
				listen: [],
			}
		},
		onLoad(opts) {
			uni.setNavigationBarTitle({
				title: opts?.name || ''
			});
			Object.assign(this.content, opts);
			this.getDetail();
		},
		methods: {
			getDetail() {
				uni.showLoading();
				return detail({
					uuid: this.content.uuid,
				}).then(({ content = {}, knowledge_point = [], new_word = [], grammar = [], listen = [], paper }) => {
					Object.assign(this.content, content);
					this.knowledgePoint.splice(0, this.knowledgePoint.length, ...knowledge_point);
					this.newWord.splice(0, this.newWord.length, ...new_word);
					this.grammar.splice(0, this.grammar.length, ...grammar);
					this.listen.splice(0, this.listen.length, ...listen);
					this.paper.uuid = paper ? paper.uuid : null;
					this.paper.name = paper ? paper.name : null;
					addRecord({
						relate_uuid: content.chapter_uuid,
						type: 'TeachingMaterial',
					});
				}).catch(console.warn).finally(uni.hideLoading);
			},
			getChapterDetail() {
				return chapterDetail({
					uuid: this.content.chapter_uuid,
				}).then((res) => {
					console.warn(res);
					Object.assign(this.chapter, res);
				}).catch(console.warn);
			},
			handleOpItemClick(selector) {
				uni.pageScrollTo({
					selector,
				});
			},
			handleKpClick(item) {
				uni.navigateTo({
					url: `/pagesA/knowleadgePoint/detail?uuid=${item.uuid}`,
				});
			},
			preview(src, e) {
				console.warn(src, e);
			},
			handleUnitTestClick() {
				uni.navigateTo({
					url: `/pagesA/paper/detail?uuid=${this.paper.uuid}&name=${this.paper.name}`,
				});
			},
		}
	}
</script>
<style>
@import url("@/components/u-parse/u-parse.css");
</style>
<style lang="scss" scoped>
	.op-wrapper {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 1rpx solid lightgray;
		.op-item {
			flex: 1;
			outline: none;
			border: none;
			border-radius: 0;
		}
		.op-item::after {
			content: none;
		}
	}
	
	.section-wrapper {
		background-color: white;
		.section-title {
			padding-left: 20rpx;
			font-weight: bold;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
		}
		.section-content {
			padding: 20rpx;
		}
	}
	
	.knowledge-point-list {
		padding-left: 20rpx;
		padding-right: 20rpx;
		.kp-item {
			padding-top: 8rpx;
			padding-bottom: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&__icon {
				width: 30rpx;
				height: 30rpx;
			}
		}
		.kp-item:active {
			background-color: #f8f8f8;
		}
	}
</style>
